<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<title>Wolverine Peace Webshop</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" > </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"> </script>
<script type="text/javascript">

/**
 * Metode til at hente parameter ud fra en URL.
 */
function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

$(function() {
	
	var itemId = gup("item" ); //Get the value of the item parameter 
	$("#itemId").val( itemId );
	
	//Get item information.
	$.get("PeaceShop", {item: itemId}, function(data){
		
		var jData = $( data );
		var jItem = jData.find("item");
		var jName		 = jItem.find("name").text();
		var JDescription = jItem.find("description").text();
		var JCategory	 = jItem.find("category").text();
		var jPrice		 = jItem.find("price").text();
		var jPicture	 = jItem.find("pictureURL").text();
		
		//Adding information to the view 
		$(".canvas").append( "<figure><img src='pictures/"+ jPicture + "' alt='" + jName+ "' /></figure>");
		$(".name").append( "<h2>" + jName + "</h2>");
		$(".description").append("<details>" + JDescription + "</details>" );
		$(".price").append( "Price: " + jPrice );
		$(".category").append( "Category: " + JCategory );
		
		//Retrieving review information
		var jReviews 	 = jItem.find("reviews").children(); 
		jReviews.each(
				function( intSectionIndex ) {
					//Getting the information 
					var jReview		= $( this );
					var jDate 		= new Date();
					jDate.setTime(jReview.attr("date"));
					var jUser		= jReview.find("user").text();
					var jComment	= jReview.find("comment").text();
					
					//Creating new div's to add to the view
					var reviewDiv	= $("<div class='itemReview'></div>");
					var dateDiv		= $("<div class='date'>Added: <time>" + jDate.toLocaleString() + "</time></div>");
					var userDiv		= $("<div class='user'><address>User: " + jUser + "</address></div>");
					var commentDiv	= $("<div class='comment'>" + jComment + "</div>");
					
					//Append information to the new review div.
					reviewDiv.append(dateDiv);
					reviewDiv.append(userDiv);
					reviewDiv.append(commentDiv);
					
					//Adding the review to the view
					$("#itemReviews").append(reviewDiv);
				});
	 }, 'xml');
	
	//Find the object to where the dialog should be added. 
	var dia = $("#dialog");
	
	//Add dialog to object. 
	dia.dialog({
		autoOpen: false,
		title: 'Add Review',
		stack: false,
		draggable: true,
		maxHeight: 350,
		minHeight: 300,
		maxWidth: 500,
		minWidth: 350,
		buttons: {
		"Send": function() {
			var form = $("#reviewForm"); //the form
			
			//Getting information from the form. 
			var user = form.find("input[name='user']").val();
			var comment = $("#comment").val();
			var itemId = $("#itemId").val();
			
			//Sending review information to the server. 
			$.post("PeaceShop", {item: itemId, name: user, comment: comment}, function() {
				$(dia).dialog("close"); //close the dialog when review is send to the server
			});
		}, 
		"Cancel": function() {
				$(this).dialog("close");
			}
		}
	});
	
	//Adding action to object. 
	$("#openDialog").click(function() {
		$(dia).dialog('open');
	});

});
</script>
<body>
	<div id="item">
		<div class="top_wrapper">
			<div class="canvas"></div>
			<div class="name"></div>
			<div class="category"></div>
			<div class="price"></div>
		</div>
		<div class="description"></div>
		<div class="clear"></div>
		<hr />
		<div id="openDialog"><b>Add review</b></div>
		<div class="clear"></div>
		<div id='dialog'>
			<form id='reviewForm'>
				<label for='user'>Name:</label>
				<input type='text' name='user' value='test' id='user' />
				<br />
				<label for='comment'>Comment:</label><br />
				<textarea rows='4' cols='22' name='comment' id='comment'></textarea>
				<input type='hidden' name='itemId' id='itemId' value='' />
			</form>
		</div>		
		<aside id="itemReviews"></aside>
	</div>
</body>
</html>
